<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<div th:fragment="paging">
    <div class="pagination-bottom">
        <div class="pagination" id="pagination">
<!--            <a href="/" class="extend prev">上一页</a>-->
<!--            <span href="/" class="page-number current">1</span>-->
<!--            <a href="/" class="page-number ">2</a>-->
<!--            <a href="/" class="page-number ">3</a>-->
<!--            <a href="/" class="extend next">下一页</a>-->
        </div>
    </div>
    <script type="text/javascript" th:inline="javascript">
        const total = [[${total}]];
        const page = [[${page}]];
        const pages = [[${pages}]]
        if (page == 1) {
            if (pages > 1) {
                $("#pagination").html(`<a href="?page=2" class="extend next">下一页</a>`)
            }
        } else {
            if (pages <= 5) {
                $("#pagination").html(`<a href="?page=${page - 1}" class="extend prev">上一页</a>`);
                for (let i = 1; i <= pages; i++) {
                    if (i == page) {
                        $("#pagination").append(`
                    <span  class="page-number current">${i}</span>
                   `)
                    } else {
                        $("#pagination").append(`
                <a href="?page=${i}" class="page-number">${i}</a>
                   `)
                    }

                }
                if (page != pages) {
                    $("#pagination").append(`<a href="?page=${page + 1}" class="extend next">下一页</a>`);
                }
            } else {
                $("#pagination").html(`<a href="?page=${page - 1}" class="extend prev">上一页</a>`);
                let start = page - 2 >= 1 ? page - 2 : 1
                if (pages - start < 5) {
                    start = pages - 5
                }
                const end = start + 5
                for (let i = start; i <= end; i++) {
                    if (i == page) {
                        $("#pagination").append(`
                    <span  class="page-number current">${i}</span>
                   `)
                    } else {
                        $("#pagination").append(`
                <a href="?page=${i}" class="page-number">${i}</a>
                   `)
                    }

                }
                if (page != pages) {
                    $("#pagination").append(`<a href="?page=${page + 1}" class="extend next">下一页</a>`);
                }
            }
        }
    </script>
</div>
</body>
</html>